<template>
  <div>

    <div style="width: 1000px;padding-left: 100px;float: left">
      <div style="margin-left: 55px;height: 70px">
        共找到相关结果<font color="red">{{ total }}</font>个<br><br>
        <font size="6">相关分类</font>
      </div>
      <el-row>
        <el-col :span="20" v-for="(o, index) in listType" :key="index" :offset="index > 0 ? 1 : 1" style="width: 200px;height: 300px;margin-top: 30px">
          <el-card :body-style="{ padding: '20px' }">
            <div style="cursor:pointer;" @click="type()">
            <img :src="o.pic" class="image4">
            <div style="padding: 0px;font-size: 20px"align="center">
              <span v-html="o.atName"></span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <br>
    <div style="margin-left: 55px">
      <font size="6">相关主播</font>
      <span style="float: right;margin-right:50px;cursor: pointer" @click="zhubo">全部</span>
    </div>

      <el-row>
        <el-col :span="10" v-for="(o, index) in listAnchor" :key="index" :offset="index > 0 ? 1 : 1" style="width: 200px;height: 300px;margin-top: 30px">
          <el-card :body-style="{ padding: '20px' }">
            <div style="cursor: pointer" @click="zhubowhole(o.aId)">
            <img :src="o.aPic" style="border-radius:50%" class="image4">
            <div style="padding: 0px;font-size: 20px"align="center">
              <span v-html="o.aName" ></span><br>
              <span v-html="o.atName"></span><br>
              <i class="el-icon-star-off"style="color: orange" ></i><span>{{o.aGuanzhu}}</span><br>
              <span>{{o.chenghao}}</span>
            </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <br>
      <div style="margin-left: 55px">
        <font size="6">相关直播</font>
        <span style="float: right;margin-right:50px;cursor: pointer" @click="live">全部</span>
      </div>

      <el-row>
        <el-col :span="10" v-for="(o, index) in listlive " :key="index" :offset="index > 0 ? 1 : 1" style="width: 280px;height: 250px;margin-top: 20px">
          <el-card :body-style="{ padding: '0px' }" style="border-radius: 20px">
            <div style="cursor: pointer" @click="livewhole(o.aId)">
            <img :src="o.fengmian" class="image5">
            <div style="padding: 0px;">
              <span style="font-size: 20px" v-html="o.aTitle"> </span> <span v-html="o.atName" style="float: right;font-weight:bold;color:gray;margin-right: 20px"></span><br>
              <i class="el-icon-user-solid" ></i> &nbsp;&nbsp;<span v-html="o.aName"></span>
              <span style="float: right;margin-right: 20px"><i class="el-icon-star-off"style="color: orange" ></i>{{o.aRedu}}</span><br>
              &nbsp;&nbsp;&nbsp;<span style="color: orange">{{o.chenghao}}</span>
            </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <br>
      <div style="margin-left: 55px">
        <font size="6">相关视频</font>
        <span style="float: right;margin-right:50px;cursor: pointer" @click="video">全部</span>
      </div>
      <el-row>
        <el-col :span="10" v-for="(o, index) in listvideo" :key="index" :offset="index > 0 ? 1 : 1" style="width: 280px;height: 250px;margin-top: 20px">
          <el-card :body-style="{ padding: '0px' }" style="border-radius: 20px">
            <div style="cursor: pointer" @click="videowhole(o.vId)">
            <img :src="o.vPic" class="image5">
            <div style="padding: 0px;font-size: 18px">
              <span v-html="o.vType+':'"></span><span v-html="o.vName"></span>
            </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
  </div>
    <br><br>
    <div style="width: 300px;padding-left:30px;float: left">
      <div slot="header" class="clearfix">
        <span style="font-size: 30px">热搜榜单</span>
      </div>
      <br>
      <el-card style="width: 300px;">
      <div v-for="(o,index) in hotAnchor" :key="index" class="text item" >
        <div @click="li(o.aId)" style="width:270px; height:50px;margin-right:40px;font-size:20px;cursor: pointer"    @mouseover="move(o)" @mouseout="out()">{{ index+1 }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span :class = "active == o ? 'addclass' : '' "> {{ o.aName }}</span><span style="float: right"><i class="el-icon-star-on" style="color: red"></i>{{ o.aRedu }}</span></div>
      </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "showmultiple",
  data(){
    return{
      currentDate: new Date(),
      style:{
        color:''
      },
      active:'',
      hotAnchor:[],
      listAnchor:[],
      listlive:[],
      listType:[],
      listvideo:[],
      word:'',
      total:0,
    }
  },
  methods: {
    zhubo(){
      this.$router.push("showzhubo");
    },
    live(){
      this.$router.push("showlive");
    },
    video(){
      this.$router.push("showvideo");
    },
    move(id){
      this.active=id;
      },
    out(){
      this.active=-1;
    },
    findAllHotAnchor(){
      axios.get("http://localhost:7000/live-search/search/hotCheck").then(res=>{
        if(res.data.code==200){
          this.hotAnchor=res.data.data;
        }
      })
    },
    likeAnchor(){
      axios.post("http://localhost:7000/live-search/search/likeAnchor",{
        word:this.word,
        num:0
      }).then(res=>{
        if(res.data.code==200){
          this.listAnchor=res.data.data;
          this.total+=res.data.total;
        }
      })
    },
    likeType(){
      axios.post("http://localhost:7000/live-search/search/likeType",{
        word:this.word,
      }).then(res=>{
        if(res.data.code==200){
          this.listType=res.data.data;
          this.total+=res.data.total;
        }
      })
    },
    likelive(){
      axios.post("http://localhost:7000/live-search/search/likeAnchor",{
        word:this.word,
        num:1
      }).then(res=>{
        if(res.data.code==200){
          this.listlive=res.data.data;
          this.total+=res.data.total;
        }
      })
    },
    likeVideo(){
      axios.post("http://localhost:7000/live-search/search/likeVideo",{
        word:this.word
      }).then(res=>{
        if(res.data.code==200){
          this.listvideo=res.data.data;
          this.total+=res.data.total;
        }
      })
    },
    type(){
      this.$router.push("/fenlei")
    },
    zhubowhole(id){
      this.$router.push({name:'zhibo',query:{aId:id}})
    },
    livewhole(id){
      this.$router.push({name:'zhibo',query:{aId:id}})
    },
    videowhole(id){
      this.$router.push({name:'videos',params:{id:id}})
    },
    li(id){
      this.$router.push({name:'zhibo',query:{aId:id}})
    }
  },
  mounted() {
    this.word=this.$route.params.word;
    this.findAllHotAnchor();
    this.likelive();
    this.likeAnchor();
    this.likeType();
    this.likeVideo();
  }

}
</script>
<style>
.time {
  font-size: 13px;
  color: #999;
}
.addclass{
  color: red;
}

.bottom {
  margin-top: 50px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image4 {
  width: 150px;
  margin: auto;
  display: block;
}
.image5 {
  width: 320px;
  height: 150px;
  margin: auto;
  display: block;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>

<style scoped>

</style>
